<template>
  <view class="hire_page">
    <view class="header">
      <view class="_w-max _top _left _z-index-2 _pos-fixed _top _left"  :style="{ 'background-color': 'rgba(76, 145, 250,' + srollOpacity + ')' }">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="felx_c h_96 f_s_18"  :style="{ color: 'rgb(' + srollColor + ','  + srollColor + ',' + srollColor +')'}"><image class="back-img" src="../static/back.png" mode="" @tap="goBack" />余额</view>
      </view>
    </view>
    <view class="container">
        <view class="wallet-box">
          <view class="title">我的钱包</view>
          <view class="deposit-box">
            <view class="left">我的押金(元) <text>{{userInfo.deposit||'0.00'}}</text></view>
            <view class="right" @tap="handleReturnDeposit">退押金<image class="arrow-img" src="../static/right_arrow.png" mode="" /></view>
          </view>
          <view class="balance-detail-box">
              <view class="left">
                <view class="txt1">当前余额</view>
                <view class="txt2">{{userInfo.now_money||'0.00'}}</view>
              </view>
              <view class="right" @tap="handleRecharge">
                <view class="btn">余额充值</view>
              </view>
          </view>
        </view>
        <view class="balance-box">
          
        </view>

        <view class="integral-use-box">
          <view class="title">余额明细</view>
          <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
              <view class="date-title">{{date}}<image class="down-arrow-img" src="../static/down_arrow.png" mode="" /></view>
          </picker>
          <view class="list" v-if="balanceDetailData.length > 0">
              <view class="item" v-for="(item, index) in balanceDetailData" :key="index">
                <view class="left-box">
                  <image class="balance-img" src="../static/balance_img.png" mode="" />
                  <view class="text-box">
                    <view class="text1">{{item.title}}</view>
                    <view class="text2">{{item.add_time}}</view>
                  </view>
                </view>
                <view class="money">{{item.pm == 1 ? '+' : '-'}}{{item.number}}</view>
              </view>
          </view>
          <view class="no-data-box" v-else>
            <image src="../static/no_coupon.png" class="no-data-img" />
            <view class="text">暂无记录</view>
          </view>
        </view> 
    </view>
  </view>
</template>
<script>
import { getAllCity } from '@/api/car.js'
import { getBalanceDetail, getUserInfo } from '@/api/user.js'

export default {
  data() {
    return {
      recHeight: 0,
      srollOpacity: 0,
      srollColor: 255,
      balanceDetailData: [],
      date: this.getDate({
        format: true
     }),
     userInfo: {}
    }
  },
  computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
  onPageScroll(e) {
    this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onShow() {
    this.getUserInfo()
    this.getDetail()
  },
  onLoad() {
    this.getPhoneInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
    	getUserInfo().then((res)=>{
    		this.userInfo = res.data;
    	}).catch((err)=>{
    		uni.showToast({
    			title:'用户信息获取失败',
    			icon:'none'
    		})
    	})
    },
    handleRecharge(){
      uni.navigateTo({
        url: `/pages/users/balance/recharge`
      })
    },
    handleReturnDeposit(){
      // uni.navigateTo({
      //   url: `/pages/users/return_deposit/index`
      // })
      uni.switchTab({
        url: `/pages/car_index/order_list`
      })
    },
    bindDateChange: function(e) {
        this.date = e.detail.value
        this.getDetail()
    },
    getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
          
        if (type === 'start') {
            year = year - 60;
        } else if (type === 'end') {
            year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}`;
    },
    handleIntegralDetail(){
      uni.navigateTo({
        url: `/pages/users/sign_in_integral/detail`
      })
    },
    goBack(){
      uni.navigateBack()
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    },
    getDetail(){
      let params = {
        add_time: this.date
      }
      getBalanceDetail(params).then((res) => {
        console.log('res233---', res)
        this.balanceDetailData = res.data.data;
      }).catch((err)=>{
     		uni.showToast({
     			title:'余额明细获取失败',
     			icon:'none'
     		})
     	})
     },
    }
}
</script>
<style lang="scss" scoped>
  .sign-popup-box{
    position: relative;
    width: 566rpx;
    padding-bottom: 46rpx;
    background: linear-gradient( 136deg, #E5F2FE 0%, #FFFFFF 44%, #E6EFFE 100%);
    box-shadow: inset 0rpx 4rpx 10rpx 0rpx rgba(153,153,153,0.1);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #F7FAFC;
    text-align: center;
    .integral-img3{
      width: 175rpx;
      height: 178rpx;
      margin-top: -70rpx;
    }
    .integral-img4{
      width: 160rpx;
      height: 158rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .title{
      font-size: 48rpx;
      color: #8C2508;
      font-weight: bold;
      margin-top: 0rpx;
      margin-bottom: 28rpx;
    }
    .desc{
      font-size: 26rpx;
      color: #8C2508;
    }
    .btn{
      margin: 60rpx auto 0;
      width: 342rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;
      font-size: 26rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #F94846 0%, #FFA952 100%);
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(244,53,49,0.25);
      border-radius: 74rpx 74rpx 74rpx 74rpx;
    }
  }
  .integral-close-img{
    display: block;
    width: 38rpx;
    height: 38rpx;
    margin: 28rpx auto 0;
  }
  .back-img{
    position: absolute;
    left: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }
  .header{
    padding: 0 26rpx;
    height: 400rpx;
    position: relative;
    background: linear-gradient(180deg, #4C91FA 0%, #F5F5F5 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .integral-img1{
    position: absolute;
    top: 220rpx;
    right: 24rpx;
    width: 324rpx;
    height: 236rpx;
    z-index: 2;
  }

.h_96 { height: 96rpx; }
.c_fff { color: #FFFFFF; }
.f_s_18 { font-size: 36rpx; }

.felx_c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #F8F9FC;
  color: rgba(0, 0, 0, 0.9);
}

.container{
  width: 750rpx;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
  position: relative;
  margin: -160rpx auto 0;
  z-index: 2;
  .wallet-box{
    width: 686rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    background: linear-gradient( 134deg, #E8F2FE 0%, #FFFFFF 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #FFFFFF;
    .title{
      margin-bottom: 38rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #3278FF;
    }
    .deposit-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        font-size: 26rpx;
        color: #5B6069;
        display: flex;
        align-items: center;
        text{
          margin-left: 16rpx;
          font-weight: bold;
          font-size: 40rpx;
          color: #1B1910;
        }
      }
      .right{
        display: flex;
        font-size: 26rpx;
        color: #5B6069;
        .arrow-img{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .balance-detail-box{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 52rpx;
      .left{
        .txt1{
          margin-bottom: 10rpx;
          font-size: 26rpx;
          color: #5B6069;
        }
        .txt2{
          font-weight: bold;
          font-size: 48rpx;
          color: #1B1910;
        }
      }
      .right{
        .btn{
          width: 116rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          font-size: 24rpx;
          color: #FFF;
          background: #0080FF;
          border-radius: 14rpx 14rpx 14rpx 14rpx;
        }
      }
    }
  }
  
  .integral-use-box{
    padding: 32rpx;
    background: #FFF;
    border-radius: 16rpx;
    margin-top: 30rpx;
    .title{
      margin-bottom: 32rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #1A1A1A;
    }
    .date-title{
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 30rpx;
      color: #242424;
      .down-arrow-img{
        width: 40rpx;
        height: 40rpx;
        margin-left: 2rpx;
      }
    }
   
    .list{
      .item{
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 28rpx;
         background: #fff;
         padding: 20rpx;
         border-bottom: 1rpx solid #ECECEC;
         .left-box{
           display: flex;
           align-items: center;
         }
         .balance-img{
           width: 44rpx;
           height: 45rpx;
           margin-right: 16rpx;
         }
         .text-box{
            .text1{
              margin-bottom: 6rpx;
              font-weight: 500;
             font-size: 28rpx;
             color: rgba(0,0,0,0.9);
            }
            .text2{
              font-size: 26rpx;
              color: #999999;
            }
         }
         .money{
           font-weight: 500;
           font-size: 36rpx;
           color: #333333;
         }
         
      }
    }
  }
}

.no-data-box{
  .no-data-img{
    width: 360rpx;
    height: 360rpx;
    display: block;
    margin: 20rpx auto 40rpx;
  }
  .text{
    text-align: center;
    font-size: 26rpx;
    color: #B9B9BD;
  }
}

</style>